<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>API</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.popup.js"></script>
        <script src="../../source/js/nova.data.js"></script>
        <script src="../../source/js/nova.list.js"></script>
        <script src="../../source/js/nova.dropdownlist.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">API</div>
        <!-- description -->
        <div id="example" class="n-content">
            <input id="products" />

            <script>
                $(document).ready(function() {
                    var data = [
                        {text: "The Shawshank Redemption", value:"1"},
                        {text: "The Godfather", value:"2"},
                        {text: "The Godfather: Part II", value:"3"},
                        {text: "Il buono, il brutto, il cattivo.", value:"4"},
                        {text: "Pulp Fiction", value:"5"},
                        {text: "12 Angry Men", value:"6"},
                        {text: "Schindler's List", value:"7"},
                        {text: "One Flew Over the Cuckoo's Nest", value:"8"},
                        {text: "Inception", value:"9"},
                        {text: "The Dark Knight", value:"10"}
                    ];

                    $("#products").novaDropDownList(data)
                                  .closest(".n-widget")
                                  .attr("id", "products_wrapper");

                    var dropdownlist = $("#products").data("novaDropDownList"),
                        setValue = function(e) {
                            if (e.type != "keypress" || nova.keys.ENTER == e.keyCode)
                                dropdownlist.value($("#value").val());
                        },
                        setIndex = function(e) {
                            if (e.type != "keypress" || nova.keys.ENTER == e.keyCode) {
                                var index = parseInt($("#index").val());
                                dropdownlist.select(index);
                            }
                        },
                        setSearch = function(e) {
                            if (e.type != "keypress" || nova.keys.ENTER == e.keyCode)
                                dropdownlist.search($("#word").val());
                        };

                    $("#enable").click(function() {
                        dropdownlist.enable();
                    });

                    $("#disable").click(function() {
                        dropdownlist.enable(false);
                    });

                    $("#open").click(function() {
                        dropdownlist.open();
                    });

                    $("#close").click(function() {
                        dropdownlist.close();
                    });

                    $("#getValue").click(function() {
                        alert(dropdownlist.value());
                    });

                    $("#getText").click(function() {
                        alert(dropdownlist.text());
                    });

                    $("#setValue").click(setValue);
                    $("#value").keypress(setValue);

                    $("#select").click(setIndex);
                    $("#index").keypress(setIndex);

                    $("#find").click(setSearch);
                    $("#word").keypress(setSearch);
                });
           </script>
            <div class="configuration" style="width: 210px">
                <span class="configHead">Configuration</span>
                <span class="configTitle">API Functions</span>
                <ul class="options">
                    <li>
                        <button id="enable" class="n-button">Enable</button> or <button id="disable" class="n-button">Disable</button>
                    </li>
                    <li>
                        <button id="open" class="n-button">Open</button> or <button id="close" class="n-button">Close</button> the drop-down
                    </li>
                    <li>
                        <button id="getValue" class="n-button">Get value</button> or <button id="getText" class="n-button">Get text</button>
                    </li>
                    <li>
                        <input id="index" value="0" /> <button id="select" class="n-button">Select by index</button>
                    </li>
                    <li>
                        <input id="value" value="1" /> <button id="setValue" class="n-button">Select by value</button>
                    </li>
                    <li>
                        <input id="word" value="Pulp" /> <button id="find" class="n-button">Select item starting with</button>
                    </li>
                </ul>
            </div>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>
